import React from "react";
import axios from 'axios'
import { useState,useEffect } from 'react';
import PubSub from 'pubsub-js';
import {Link, Navigate, useNavigate} from 'react-router-dom'

export default function HeroList() {
  //声明状态
  let [heros, setHeros] = useState([]);
  //声明状态管理关键字的值
  let [keyword, setKeyword] = useState();
  //声明一个状态
  let [isFirst, setIsFirst] = useState(true);
  //声明一个状态 加载中..
  let [loading, setLoading] = useState(false);

  //声明函数
  let getHeros = async () => {
    //设置为 加载中..
    setLoading(true);
    //设置第一次状态为 false
    setIsFirst(false);
    //清空英雄列表
    setHeros([]);
    let result = await axios.get("http://api.xiaohigh.com/heros", {
      params: {
        name_like: keyword
      }
    });
    //更新英雄列表
    setHeros(result.data);
    //设置为 未加载中
    setLoading(false);
  };

  //组件挂载完毕  单独模拟 componentDidUpdate
  useEffect(() => {
    if(keyword === undefined) return;
    getHeros();
  }, [keyword]); // eslint-disable-line

  //组件挂载完毕
  useEffect(()=> {
    PubSub.subscribe('keyword', async (name, data) => {
      //更新关键字的状态
      setKeyword(data);
    });
  }, [])

  //获得 navigate 函数
  let navigate = useNavigate();

  return (
    <div className="hero-list">
      {/* 加载中的状态管理 */}
      {loading && <h2>加载中....</h2>}
      {/* 第一次的欢迎提示 */}
      {isFirst && <h2>欢迎来到王者荣耀</h2>}
      {/* 空状态的提醒 */}
      {!loading && !isFirst && heros.length === 0 && <h2>暂无数据</h2>}
      
      {heros.map((item) => { 
        return (
          <div key={item.id} className="hero-item">
            <img onClick={() => {
              //无刷新跳转
              //params 传参
              // navigate(`/hero/${item.id}`);
              //query 传参
              // navigate(`/hero?id=${item.id}`)
              // state 传参
              navigate('/hero', {
                //
                replace: false, //替换模式
                //state 名字不能改
                state: {
                  id: item.id
                }
              })
            }} src={"https://cdn.xiaohigh.com" + item.image} alt="" />
            <p>{item.name}</p>
          </div>
        );
      })}
    </div>
  );
}
